<template>
	<el-container>
		<el-aside width="50%">
			<h1 style="color: red">部门</h1>
			<section>
				<!--列表-->
				<el-table :data="departments" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
						  @row-click="openEmployees" style="width: 100%;">
					<el-table-column type="index" width="80">
					</el-table-column>
					<el-table-column prop="sn" label="编号" width="100" sortable>
					</el-table-column>
					<el-table-column prop="name" label="姓名" width="100" sortable>
					</el-table-column>
					<el-table-column prop="state" label="状态" width="100" sortable>
						<template scope="scope">
							<span style="color: green" v-if="scope.row.state == 0">正常</span>
							<span style="color: red" v-else-if="scope.row.state == -1">禁用</span>
							<span style="color: gold" v-else>未知</span>
						</template>
					</el-table-column>
					<el-table-column prop="manager.username" label="管理员" width="120" sortable>
					</el-table-column>
					<el-table-column prop="parent.name" label="父部门" sortable>
					</el-table-column>
				</el-table>
				<!--工具条-->
				<el-col :span="24" class="toolbar">
					<el-pagination layout="prev, pager, next"
								   @current-change="deptHandleCurrentChange"
								   :page-size="deptPageSize"
								   :total="deptTotal"
								   :current-page="deptPage"
								   style="float:right;">
					</el-pagination>
				</el-col>
			</section>
		</el-aside>
		<el-main>
			<h1 style="color: red">员工</h1>
			<!--列表-->
			<el-table :data="employees" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
				<el-table-column type="index" width="80">
				</el-table-column>
				<el-table-column prop="username" label="姓名" width="120" sortable>
				</el-table-column>
				<el-table-column prop="email" label="邮箱" width="160" sortable>
				</el-table-column>
				<el-table-column prop="phone" label="电话" width="120" sortable>
				</el-table-column>
				<el-table-column prop="age" label="年龄" width="80" sortable>
				</el-table-column>
			</el-table>

			<!--工具条-->
			<el-col :span="24" class="toolbar">
				<el-pagination layout="prev, pager, next"
							   @current-change="empHandleCurrentChange"
							   :page-size="empPageSize"
							   :total="empTotal"
							   :current-page="empPage"
							   style="float:right;">
				</el-pagination>
			</el-col>

		</el-main>
	</el-container>
</template>

<script>
    export default {
        data() {
            return {
                deptTotal: 0,
                deptPage: 1,
                deptPageSize: 10,
                empTotal: 0,
                empPage: 1,
                empPageSize: 10,
                listLoading: false,
                sels: [],//列表选中行
                departments: [],
                deptByEmployees:[],
                employees:[],
                deptTree:[]
            }
        },
        methods: {
            openEmployees(row){
                let para = {
                    currentPage: this.empPage,
                    pageSize: this.empPageSize,
					id: row.id
                };
                this.listLoading = true;	// 开启忙等框
                // 发送axios请求，从后端拿数据
                this.$http.post("/employee/fix",para)
                    .then(result=>{
                        this.empTotal = result.data.total;
                        this.employees = result.data.rows;
                        this.listLoading = false;
                    })
                    .catch(result=>{
                        this.$message({
                            message: '系统异常',
                            type: 'error'
                        });
                    })
			},
            deptHandleCurrentChange(val) {
                this.deptPage = val;
                this.getDepartments();
            },
            empHandleCurrentChange(val) {
                this.empPage = val;
                this.getDepartments();
            },
            //获取部门列表
            getDepartments() {
                let para = {
                    currentPage: this.deptPage,
                    pageSize: this.deptPageSize,
                };
                this.listLoading = true;	// 开启忙等框
                // 发送axios请求，从后端拿数据
                this.$http.post("/department",para)
                    .then(result=>{
                        this.deptTotal = result.data.total;
                        this.departments = result.data.rows;
                        this.listLoading = false;
                    })
                    .catch(result=>{
                        this.$message({
                            message: '系统异常',
                            type: 'error'
                        });
                    })

            },
            selsChange: function (sels) {
                this.sels = sels;
            },
            getDeptByEmployees(){
                this.$http.get("/employee")
                    .then(result=>{
                        if (result.data){
                            this.deptByEmployees = result.data; // result.data 获取员工的集合
                        }
                    })
            },
            getDeptTree(){
                this.$http.get("/department/tree")
                    .then(result=>{
                        if (result.data){
                            this.deptTree = result.data; // result.data 获取部门树的集合
                        }
                    })
            }
        },
        mounted() {
            this.getDepartments();
            this.getDeptByEmployees();	// 页面加载就查询员工的所有数据
        }
    }

</script>

<style scoped>

</style>